<!--注册安全工程师考试通过情况统计-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120" :loading="pageStatus.baseLoading">
            <Row class="query-form">
                <Col span="8">
                    <FormItem label="单位名称：" prop="companyId">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName'
                                      :orgTree="true" disabled
                                      :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="通过考试年份：" prop="year">
                        <DatePicker class="query-form-el" type="year" placeholder="请选择年度" v-model="dataToQuery.year1" :clearable="false"
                                    @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
                    </FormItem>
                </Col>

                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
                <Col span="8" v-if="switchFlag">
                    <FormItem label="姓名：">
                        <Input type="text" class='query-form-el' v-model="dataToQuery.userName"
                               placeholder="请输入姓名/工作部门/手机号"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form" >
                <Col span="8">
                    <FormItem label='是否注册：'>
                        <Select v-model='dataToQuery.ifRegister' class='query-form-el'>
                            <Option value="1" lable="是">是</Option>
                            <Option value="0" lable="否">否</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="专业类别：">
                        <Select v-model='dataToQuery.certificateType' placeholder="请选择专业类别" class='query-form-el'>
                            <Option v-for="item in dictMap.certificateTypes" :value="item.codingCodeId"
                                    :key="item.codingCodeId">{{item.codingName }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                    <download-button :api="exportUrl" :queryForm="dataToQuery" />
                    <!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" :row-class-name="rowClassName" no-data-text="没有查询到相关数据!"
               @on-selection-change='getSelectRows' :loading='pageStatus.loading || pageStatus.baseLoading'
               border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>
        <Modal :title="getModalTitle('注册安全工程')" :transfer=false :mask-closable="false" v-model="dialogShow"
               v-if="dataToView && dialogShow" :width=800 :styles="{height:'582px'}" class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false"
                          :model="dataToView" :rules="mode === 'view'?{}:ruleCustom"
                          :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='单位名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId'
                                                  @setOrgname="setCompanyName" :orgTree="true"
                                                  :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='姓名：' prop='userName'>
                                    <div v-if="mode === 'view'">{{dataToView.userName}}</div>
                                    <Input v-else class='' placeholder="请填写姓名" type='text'
                                           v-model='dataToView.userName'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='性别：' prop='gender'>
                                    <div v-if="mode === 'view'">{{ dataToView.gender=='M'?'男':'女' }}</div>
                                    <Select v-else v-model='dataToView.gender'>
                                        <Option value="M" lable="男">男</Option>
                                        <Option value="F" lable="女">女</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='民族：' prop='nation'>
                                    <div v-if="mode === 'view'">{{ dataToView.nation }}</div>
                                    <Select v-else v-model="dataToView.nation" placeholder="请选择" filterable>
                                        <Option v-for="item in nations"
                                                :key="item"
                                                :label="item"
                                                :value="item"></Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='手机号：' prop='phoneNumber'>
                                    <div v-if="mode === 'view'">{{dataToView.phoneNumber}}</div>
                                    <Input v-else class='' placeholder="请填写手机号" type='text'
                                           v-model='dataToView.phoneNumber'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='工作部门：' prop='department'>
                                    <div v-if="mode === 'view'">{{dataToView.department}}</div>
                                    <Input v-else class='' placeholder="请填写工作部门" type='text'
                                           v-model='dataToView.department'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='通过考试年份：' prop='year'>
                                    <div v-if="mode === 'view'">{{dataToView.year}}</div>
                                    <DatePicker v-else class='w' placeholder="请选择年份" v-model='dataToView.yearDate'
                                                type="year"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='证书编号：' prop='certificateNum'>
                                    <div v-if="mode === 'view'">{{dataToView.certificateNum}}</div>
                                    <Input v-else class='' placeholder="请填写证书编号" type='text'
                                           v-model='dataToView.certificateNum'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='专业类别：' prop='certificateType'>
                                    <div v-if="mode === 'view'">{{ dataToView.certificateTypeName }}</div>
                                    <!--<Input v-else class='query-form-el' placeholder="请填写专业类别" type='text' v-model='dataToView.certificateType'></Input>-->
                                    <Select v-else v-model='dataToView.certificateType' placeholder="请选择专业类别" class='query-form-el'>
                                        <Option v-for="item in dictMap.certificateTypes" :value="item.codingCodeId"
                                                :key="item.codingCodeId">{{item.codingName }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='是否注册：' prop='ifRegister'>
                                    <div v-if="mode === 'view'">{{ dataToView.ifRegister ==1?'是':dataToView.ifRegister ==1?'否':'' }}</div>
                                    <!--<Input v-else class='query-form-el' placeholder="请填写是否注册" type='text' v-model='dataToView.ifRegister'></Input>-->
                                    <Select v-else v-model='dataToView.ifRegister'
                                            @on-change="(value)=>{if(value=='0') { dataToView.registerYearDate=null,dataToView.registerYear=null,dataToView.registerTimeStart=null,dataToView.registerTimeEnd=null }}">
                                        <Option value="1" lable="是">是</Option>
                                        <Option value="0" lable="否">否</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11" v-if="dataToView.ifRegister ==1">
                                <FormItem label='初始注册年份：' prop='registerYear'>
                                    <div v-if="mode === 'view'">{{dataToView.registerYear}}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择初始注册年份" type="year" v-model='dataToView.registerYearDate'></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11" v-else></Col>
                        </Row>
                        <Row v-if="dataToView.ifRegister ==1" type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='注册期开始：' prop='registerTimeStart'>
                                    <div v-if="mode === 'view'">{{renderViewDate( dataToView.registerTimeStart) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择注册期开始" v-model='dataToView.registerTimeStart'
                                     :options="{disabledDate(date) {return date && dataToView.registerTimeEnd && date.valueOf() > dataToView.registerTimeEnd;}}"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='注册期结束：' prop='registerTimeEnd'>
                                    <div v-if="mode === 'view'">{{renderViewDate( dataToView.registerTimeEnd) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择注册期结束" v-model='dataToView.registerTimeEnd'
                                                :options="{disabledDate(date) {return date && dataToView.registerTimeStart && date.valueOf() < dataToView.registerTimeStart;}}"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="附件：">
                                    <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles">
                                        <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                        <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="附件：" prop="idFiles">
                                    <div>
                                        <Upload ref="upload"
                                                :before-upload="(file) => { beforeUpload1(file, 'id','safeCertifiedEngineer') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 10px">
                                                <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key='item'>
                                        <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id','safeCertifiedEngineer')" style="margin-left: 5px;margin-bottom: 3px"/>
                                        <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                        <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人：' prop='createUserName'>
                                    <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写填报人" readonly type='text'
                                           v-model='dataToView.createUserName'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填报时间：' prop='createDate'>
                                    <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly
                                                v-model='dataToView.createDate'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
                </Button>
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {sessionStorage} from '@/common/cacheUtils.js';
    import {formatDate, createFormAndSubmit} from '@/tools/index'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import constant from '../../../common/user.js';

    export default {
        components: {cascaderDom},
        data() {
            return {
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    {key: 'companyName', title: '单位名称', align: 'center', minWidth: 200},
                    {key: 'userName', title: '姓名', align: 'center', minWidth: 100},
                    {key: 'gender', title: '性别', align: 'center', minWidth: 70,
                        render: (h, params) => {return h('span', params.row.gender === 'M' ? '男' :params.row.gender === 'F' ? '女':'')}},
                    {key: 'nation', title: '民族', align: 'center', minWidth: 70},
                    {key: 'department', title: '工作部门', align: 'center', minWidth: 120},
                    {key: 'phoneNumber', title: '手机号', align: 'center', minWidth: 120},
                    {key: 'year', title: '通过考试年份', align: 'center', width: 110},
                    {key: 'certificateNum', title: '证书编号', align: 'center', width: 120},
                    { key:'certificateTypeName',title: '专业类别',  align: 'center', minWidth: 120,  },
                    { key:'ifRegister',title: '是否注册',  align: 'center', minWidth: 120,
                        render: (h, params) => {return h('span', params.row.ifRegister == '1' ? '是' :params.row.ifRegister == '0' ? '否':'')}},
                    { key:'registerYear',title: '初始注册年份',  align: 'center', minWidth: 120 },
                    { key:'registerTimeStart',title: '注册期开始',  align: 'center', minWidth: 120,  render: this.renderCellDate },
                    { key:'registerTimeEnd',title: '注册期结束',  align: 'center', minWidth: 120,  render: this.renderCellDate },
                    this.getActionColumns(),
                ],
                ruleCustom: {
                    companyId: [{required: true, message: '请填写单位名称', trigger: 'change'}],
                    userName: [{required: true, message: '请填写姓名', trigger: 'change'}],
                    department: [{required: true, message: '请填写工作部门', trigger: 'change'}],
                    certificateNum: [{required: true, message: '请填写证书编号', trigger: 'change'}],
                    phoneNumber: [{pattern: /^1[0-9]{10}$/, required: true, message: '请填写正确手机号', trigger: 'change'}],
                    // subjects: [ { required: true, message: '请填写工作部门', trigger: 'change', type: 'array' } ]
                    certificateType: [ { required: true, message: '请填写专业类别', trigger: 'change',}],
                    ifRegister: [ { required: true, message: '请填写是否注册', trigger: 'change',}],
                    registerTimeStart: [ { required: true, message: '请填写注册期开始', trigger: 'change',type:'date'}],
                    registerTimeEnd: [ { required: true, message: '请填写注册期结束', trigger: 'change',type:'date'}],
                    year: [{
                        validator: (rule, value, callback) => {
                            if (this.dataToView.yearDate == null || this.dataToView.yearDate == '' || this.dataToView.yearDate == undefined) {
                                callback('通过考试年份')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    registerYear: [{
                        validator: (rule, value, callback) => {
                            if (this.dataToView.registerYearDate == null || this.dataToView.registerYearDate == '' || this.dataToView.registerYearDate == undefined) {
                                callback('初始注册年份')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    idFiles: [{
                        validator: (rule, value, callback) => {
                            if (this.dataToView.idFiles && this.dataToView.idFiles.length > 0) {
                                callback()
                            } else {
                                callback('附件必须上传')
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }]
                },
                tableHeight: 10,
                // api
                queryUrl: Api.queryCertifiedEngineer,
                exportUrl: Api.exportCertifiedEngineer,
                deleteUrl: Api.deleteCertifiedEngineer,
                updateUrl: Api.updateCertifiedEngineer,
                saveUrl: Api.saveCertifiedEngineer,
                dictMap:{},
                nations: constant.nations,
            }
        },
        async mounted() {
            this.setTableHeight();
            // this.dataToQuery.year1 = new Date()
            // this.dataToQuery.year = new Date().getFullYear().toString()
            await this.$http.get(Api.queryDictBycode + "eng-00001", {}).then((res) => {
                // 数据字典 list 转 map，方便调用
                this.dictMap = {
                    'certificateTypes': res.data.data['eng-00001']
                }
            }).catch(e => {
                this.$Message.error("数据字典获取失败")
            });
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            beforeEditDialogOpen(data) {
                let year = data.row.year + '-01-01';
                data.row.yearDate = new Date(Date.parse(year.replace(/-/g, "/")));
                if (data.row.registerYear) {
                    let registerYear = data.row.registerYear + '-01-01';
                    data.row.registerYearDate = new Date(Date.parse(registerYear.replace(/-/g, "/")));
                }
            },
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                if (this.dataToQuery.yearDate) {
                    this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
                }
                this.dataToQuery.orgId = sessionStorage('userId').getObject('userId').companyId
                this.queryAjax();
            },
            // reset1() {
            //     this.dataToQuery = {
            //         year1: new Date(),
            //         year : new Date().getFullYear().toString()
            //     };
            //     if (this.$refs.queryOrgCascader) {
            //         this.$refs.queryOrgCascader.resetCurrentOrg();
            //     }
            //     this.pagedata.currentPage=1
            //     this.query()
            // },
            submit(name) {
                
                if (this.dataToView.yearDate) {
                    this.dataToView.year = this.dataToView.yearDate.getFullYear();
                }
                if (this.dataToView.registerYearDate) {
                    this.dataToView.registerYear = this.dataToView.registerYearDate.getFullYear();
                }
                // this.submitAjax(name);

                let validateFields = Object.keys(this.ruleCustom)
                if (this.dataToView.ifRegister != 1) {
                    validateFields = validateFields.filter(n=>!['registerYear','registerTimeStart','registerTimeEnd'].includes(n))
                }
                this.submitAjaxValidateField(name,this.dataToView,validateFields);
            },

            createEmptyDataToAdd() {
                return {
                    createDate: new Date(),
                    createUserId: this.currentUser.userId,
                    createUserName:this.currentUser.userName,
                    id:this.get_uuid(),
                }
            },
            async afterDataToViewInit() {
                await this.getFiles1('id', 'safeCertifiedEngineer');
            },
        },
        watch: {},
    }
</script>
<style>
    .ivu-tile div {
        display: flex;
    }
</style>
<style lang='css' scoped>
    @import '../../../index.css';

</style>
